<template>
  <div class="app-container">
    <!-- 路由视图 -->
    <router-view />

    <!-- 浮动添加按钮（仅在衣橱和搭配页面显示） -->
    <div
      v-if="showFloatingButton"
      class="floating-add-button"
      @click="showAddPopup = true"
    >
      <van-icon name="plus" class="floating-icon" />
    </div>

    <!-- 添加弹出层 -->
    <van-popup
      v-model:show="showAddPopup"
      position="bottom"
      round
      :style="{ height: '200px' }"
    >
      <div class="popup-content">
        <div class="popup-options">
          <div class="option-item diy-outfit" @click="handleDiyOutfit">
            <van-icon name="edit" class="option-icon" />
            <span class="option-text">DIY搭配</span>
          </div>
          <div class="option-item upload-clothes" @click="handleUploadClothes">
            <van-icon name="link-o" class="option-icon" />
            <span class="option-text">上传衣服</span>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 底部导航栏 -->
    <van-tabbar
      route
      v-model="active"
      active-color="#6c63ff"
      v-if="showBottomNav"
    >
      <!-- <router-link to="/" class="nav-item">
      </router-link> -->
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>

      <van-tabbar-item replace to="/clothes" icon="goods-collect-o"
        >衣橱</van-tabbar-item
      >
      <!-- <router-link to="/clothes" class="nav-item">
      </router-link> -->

      <van-tabbar-item replace to="/outfits" icon="fire-o"
        >搭配</van-tabbar-item
      >

      <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
      <!-- <router-link to="/user" class="nav-item">
      </router-link> -->
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "./store/user";
import { showToast } from "vant";

const router = useRouter();
const userStore = useUserStore();
const showBottomNav = ref(true);
const showAddPopup = ref(false);
const showFloatingButton = ref(false);

// 监听路由变化，控制底部导航栏和浮动按钮显示
// 定义不需要登录就能访问的路由
const hiddenRoutes = ["/login", "/register", "/", "/weather"];
const active = ref(0);
watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    // 只在首页、衣橱、搭配、我的四个页面显示底部导航栏
    const showNavRoutes = ["/", "/clothes", "/outfits", "/user"];
    showBottomNav.value = showNavRoutes.includes(newPath);
    console.log(newPath);

    const i = showNavRoutes.findIndex((item) => item === newPath);
    // console.log(i);

    if (i !== -1) {
      localStorage.setItem("active", i);
      active.value = i;
    } else {
      active.value = localStorage.getItem("active") * 1;
    }

    // 只在衣橱和搭配页面显示浮动添加按钮
    // 只在 clothes 和 outfits 页面显示

    showFloatingButton.value = newPath === "/clothes" || newPath === "/outfits";

    // 检查用户是否已登录
    if (!userStore.isLoggedIn && !hiddenRoutes.includes(newPath)) {
      router.push("/login");
    }
  },
  { immediate: true, deep: true }
);

// 处理DIY搭配
const handleDiyOutfit = () => {
  showAddPopup.value = false;
  router.push("/outfits/create");
};

// 处理上传衣服
const handleUploadClothes = () => {
  showAddPopup.value = false;
  router.push("/clothes/upload");
};

// 初始检查用户登录状态
if (
  !userStore.isLoggedIn &&
  router.currentRoute.value.path !== "/login" &&
  router.currentRoute.value.path !== "/register"
) {
  router.push("/login");
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  text-decoration: none;
  flex: 1;
}

.nav-item.active {
  color: #409eff;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-text {
  font-size: 12px;
}

/* 浮动添加按钮样式 */
.floating-add-button {
  position: fixed;
  bottom: 80px; /* 高于底部导航栏 */
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6c63ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.4);
  z-index: 1001; /* 高于底部导航栏 */
  cursor: pointer;
  transition: all 0.3s ease;
}

.floating-add-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.floating-icon {
  color: white;
  font-size: 24px;
}

/* 弹出层样式 */
.popup-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.popup-title {
  text-align: center;
  margin: 0 0 30px 0;
  color: #333;
  font-size: 18px;
}

.popup-options {
  display: flex;
  justify-content: space-around;
  flex: 1;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 45%;
  border-radius: 16px;
  padding: 30px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-item:active {
  transform: scale(0.95);
}

.option-item.diy-outfit {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.option-item.upload-clothes {
  background: linear-gradient(135deg, #4ecdc4 0%, #45b7aa 100%);
}

.option-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.diy-outfit .option-icon {
  color: #fff5f5;
}

.upload-clothes .option-icon {
  color: #f0fff4;
}

.option-text {
  font-size: 16px;
  font-weight: 500;
}

.diy-outfit .option-text {
  color: white;
}

.upload-clothes .option-text {
  color: white;
}
</style>
